<template>
  <d2-container>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="egForm"
        :model="egForm"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="交易日期">
              <el-date-picker
                v-model="value1"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="消息状态">
              <el-input v-model="input" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="接收者">
              <el-input v-model="input" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="消息标题">
              <el-input v-model="egForm.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="消息内容">
              <el-input v-model="egForm.content"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button size="small" @click="select_data">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb" style="text-align:left">
      <el-button type="default" size="small" @click="add_dialogVisible_fn">
        <d2-icon name="plus" />
        新增
      </el-button>
      <el-button type="default" size="small" @click="xiugai">
        <d2-icon name="plus" />
        修改
      </el-button>
      <el-button type="default" size="small" @click="shanchu">
        <d2-icon name="plus" />
        删除
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ 'text-align': 'left' }"
        :header-cell-style="{ background: '#eef1f6', 'text-align': 'center'}"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="created_time" label="发送日期" sortable width="155">
          <template slot-scope="scope">
            {{ scope.row.created_time | dateYMDHMSFormat_ss }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="消息标题" width="90"> </el-table-column>
        <el-table-column prop="content" label="消息内容"> </el-table-column>
        <el-table-column label="接收者" width="150">
          <template slot-scope="scope">
            <span
              v-for="item in scope.row.send_user_depart"
              :key="item"
              style="padding:0px 3px"
            >
              {{ item }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="状态" width="80">
          <template slot-scope="scope">
            {{ scope.row.is_send == 0 ? "未发送" : "已发送" }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handlePaginationChange"
        :current-page="egForm.p"
        layout="total, prev, pager, next"
        :total="egForm.count"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      :title="title_hade"
      :visible.sync="add_dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="3">
          <span class="flex_just_title">* 接收者：</span>
        </el-col>
        <el-col :span="19">
          <el-card shadow="never" style="width:100%">
            <el-tag
              style="margin-right:5px"
              v-for="tag in tags"
              :key="tag.name"
              closable
              @close="handleClose_tag(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </el-card>
        </el-col>
        <el-col :span="2">
          <i
            class="el-icon-plus icons"
            @click="select_dialogVisible_checkbox()"
          ></i>
        </el-col>
      </el-row>
      <el-row style="margin:15px 0px 10px 0px">
        <el-col :span="3">
          <span style="line-height:34px">* 标题：</span>
        </el-col>
        <el-col :span="19">
          <el-input v-model="add_dialogVisible_title" />
        </el-col>
      </el-row>
      <div>
        <div style="margin-bottom:5px">
          * 内容：
        </div>
        <el-input type="textarea" v-model="add_dialogVisible_desc"></el-input>
      </div>
      <div
        class="flex_just"
        style="justify-content: space-between;margin-top:15px"
      >
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="状态">
            <el-input v-model="input" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox
              label="短信"
              v-model="checked"
              name="type"
            ></el-checkbox>
            <el-button type="primary" style="margin-left:15px" size="small"
              >发送</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <el-button size="small" @click="baocun_fn">保存</el-button>
          <el-button size="small" @click="add_dialogVisible = false"
            >关闭</el-button
          >
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="增加审批主体"
      :visible.sync="select_dialogVisible_bol"
      width="60%"
      :before-close="handleClose"
    >
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="组织">
              <el-table
                ref="organization_data"
                :data="organization_data"
                :show-header="false"
                @selection-change="handleSelectionChange_add_users_one"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column property="name"> </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户">
              <el-table
                ref="users_data"
                :data="users_data"
                :show-header="false"
                @selection-change="handleSelectionChange_add_users_two"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column property="name"> </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div align="right">
        <el-button size="small" @click="select_jsz_fn">确定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>
<script>
import {
  getStation_msg_list,
  getUsers,
  getDepartments,
  station_msg
} from "@/api/url";
export default {
  data() {
    return {
      egForm: {
        p: 1,
        count: 0,
        title: "",
        content: "",
        pageSize: 20,
        startDate: "",
        endDate: ""
      },
      input: "",
      value1: "",
      title_hade: "新增-消息内容",
      tableData: [],
      add_dialogVisible: false,
      select_dialogVisible_bol: false,
      users_data: [],
      organization_data: [],
      yonghu: [],
      zuzhi: [],
      add_dialogVisible_title: "",
      add_dialogVisible_desc: "",
      tags: [],
      checked: false,
      currentRow: null
    };
  },
  created() {
    this.select_fn();
    getDepartments().then(res => {
      this.organization_data = res.result;
    });
    getUsers().then(res => {
      this.users_data = res.result;
    });
  },
  methods: {
    handlePaginationChange(val) {
      this.egForm.p = val;
      this.select_fn();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    select_fn() {
      getStation_msg_list(this.egForm).then(res => {
        this.tableData = res.result.results;
        this.egForm.count = res.result.count;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    select_dialogVisible_checkbox() {
      this.select_dialogVisible_bol = true;
      var arr = [...this.users_data].filter(x => {
        return [...this.yonghu].some(y => y.id === x.id);
      });
      var arrtwo = [...this.organization_data].filter(x => {
        return [...this.zuzhi].some(y => y.id === x.id);
      });
      this.$nextTick(() => {
        this.$refs["users_data"].clearSelection();
        this.$refs["organization_data"].clearSelection();
        arr.forEach(row => {
          this.$refs["users_data"].toggleRowSelection(row);
        });
        arrtwo.forEach(row => {
          this.$refs["organization_data"].toggleRowSelection(row);
        });
      });
    },
    handleSelectionChange_add_users_one(val) {
      this.zuzhi = val;
    },
    handleSelectionChange_add_users_two(val) {
      this.yonghu = val;
    },
    xiugai() {
      if (this.currentRow == null) {
        this.$message({
          message: "请选择一条消息",
          type: "warning"
        });
      } else {
        this.tags = [];
        this.title_hade = "修改-消息内容";
        this.add_dialogVisible = true;
        this.add_dialogVisible_title = this.currentRow.title;
        this.add_dialogVisible_desc = this.currentRow.content;
        this.zuzhi = this.currentRow.send_depart;
        this.yonghu = this.currentRow.send_user;
        this.currentRow.send_user_depart.forEach(item => {
          this.tags.push({
            name: item
          });
        });
      }
    },
    select_jsz_fn() {
      if (this.yonghu == []) {
        this.tags = this.zuzhi;
      } else {
        this.tags = this.zuzhi.concat(this.yonghu);
      }
      this.select_dialogVisible_bol = false;
    },
    baocun_fn() {
      var checked_a = 0;
      if (this.checked) {
        checked_a = 1;
      }
      var zz = [];
      var yh = [];
      this.zuzhi.forEach(item => {
        zz.push(item.id);
      });
      this.yonghu.forEach(item => {
        yh.push(item.id);
      });
      if (
        this.add_dialogVisible_title == "" ||
        this.add_dialogVisible_desc == "" ||
        this.tags.length == 0
      ) {
        this.$message({
          message: "接收者，标题，内容 不可为空",
          type: "warning"
        });
        return;
      }
      if (this.title_hade == "新增-消息内容") {
        var data = {
          operation: "ADD",
          title: this.add_dialogVisible_title,
          content: this.add_dialogVisible_desc,
          send_depart: zz,
          send_user: yh,
          is_send: checked_a,
          notice_type: 3
        };
        station_msg(data)
          .then(res => {
            this.add_dialogVisible = false;
            this.select_fn();
            this.$message({
              message: res.msg,
              type: "success"
            });
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else {
        var data = {
          operation: "MOD",
          id: this.currentRow.id,
          title: this.add_dialogVisible_title,
          content: this.add_dialogVisible_desc,
          send_depart: zz,
          send_user: yh,
          is_send: checked_a,
          notice_type: 3
        };
        station_msg(data)
          .then(res => {
            this.add_dialogVisible = false;
            this.select_fn();
            this.$message({
              message: res.msg,
              type: "success"
            });
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      }
    },
    shanchu() {
      if (this.currentRow == null) {
        this.$message({
          message: "请先选择一条消息",
          type: "warning"
        });
      } else {
        this.$confirm("此操作将永久删除该消息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            var data = {
              operation: "DEL",
              id: this.currentRow.id
            };
            station_msg(data).then(res => {
              this.select_fn();
              this.$message({
                message: res.msg,
                type: "success"
              });
            });
          })
          .cach(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleClose_tag(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    add_dialogVisible_fn() {
      this.title_hade = "新增-消息内容";
      this.tags = [];
      this.yonghu = [];
      this.zuzhi = [];
      this.add_dialogVisible_title = "";
      this.add_dialogVisible_desc = "";
      this.add_dialogVisible = true;
      this.checked = false;
    },
    select_data() {
      this.egForm.p = 1;
      this.egForm.startDate = "";
      this.egForm.endDate = "";
      if (this.value1) {
        this.egForm.startDate = this.value1[0];
        this.egForm.endDate = this.value1[1];
      }

      this.select_fn();
    }
  }
};
</script>
<style scoped>
.flex_just {
  display: flex;
}
.flex_just_title {
  line-height: 40px;
}
.icons {
  font-size: 30px;
  text-align: center;
  padding: 0px 10px;
  line-height: 40px;
}
</style>
